import 'package:assistant_zhao/location_search_page.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<String> imgList = [
    'assets/images/e-spot_header.png',
    'assets/images/e-quote_header.png',
    'assets/images/e-trucking_header.png',
  ];

  int _currentIndex = 0;

  final List<String> _ESpotOptions = ['','服务1', '服务2', '服务3'];
  String _espotDeparturePort = '';
  String _espotDeparturePortService = '';
  String _espotDestinationPort = '';
  String _espotDestinationPortService = '';

  String _equoteDeparturePort = '';
  String _equoteDestinationPort = '';
  String _equoteDeparturePortService = '';
  String _equoteDestinationPortService = '';


  String _etruckingDeparturePort = '';
  String _etruckingDestinationPort = '';
  String _etruckingDeparturePortService = '';
  String _etruckingDestinationPortService = '';

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: 8),
            child: CarouselSlider(
                items: imgList
                    .map((e) => ClipRRect(
                          borderRadius: BorderRadius.circular(8.0),
                          child: Image.asset(
                            e,
                            fit: BoxFit.fill,
                          ),
                        ))
                    .toList(),
                options: CarouselOptions(
                  height: 200,
                  viewportFraction: 0.8,
                  enlargeCenterPage: true,
                  autoPlay: true,
                  // initialPage: 0,
                  onPageChanged: (index, reason) {
                    setState(() {
                      _currentIndex = index; // 更新图片索引
                    });
                  },
                )),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: imgList
                .asMap()
                .map((index, url) {
                  return MapEntry(
                    index,
                    Container(
                      width: 8.0,
                      height: 8.0,
                      margin:
                          EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: _currentIndex == index
                            ? Color.fromRGBO(0, 0, 0, 0.9) // 选中时的颜色
                            : Color.fromRGBO(0, 0, 0, 0.4), // 默认颜色
                      ),
                    ),
                  );
                })
                .values
                .toList(),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 16),
              child: ListView(children: [
                _buildESpotSectionWidget(),
                SizedBox(height: 16,),
                _buildEQuoteSectionWidget(),
                SizedBox(height: 16,),
                _buildETruckingSectionWidget()
              ]),
            ),
          ),
          SizedBox(
            height: 24,
          )
        ],
      ),
    );
  }

  Widget _buildESpotSectionWidget() {
    return Container(
      width: double.infinity,
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Text(
          'E-Spot',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w500,
            color: Colors.black,
          ),
          textAlign: TextAlign.left,
        ),
        SizedBox(height: 20),
        GestureDetector(
          onTap: () {
           Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => LocationSearchPage(),
              ),
            ).then((result) async {
              if (result != null) {
                setState(() {
                  _espotDeparturePort = result;
                });
              }
            });
          },
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(4),
            ),
            child: Row(
              children: [
                Expanded(
                  child: Text(
                    _espotDeparturePort.isEmpty ? '点击搜索起运港口' : _espotDeparturePort,
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
                Icon(
                  Icons.search,
                  color: Colors.grey,
                ),
              ],
            ),
          ),
        ),
        SizedBox(height: 10),
        DropdownButtonFormField<String>(
          decoration: InputDecoration(
            labelText: '起运地陆运服务',
            contentPadding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            border: OutlineInputBorder(),
          ),
          value: _espotDeparturePortService,
          icon: Icon(Icons.arrow_drop_down),
          iconSize: 24,
          elevation: 16,
          style: TextStyle(color: Colors.deepPurple),
          onChanged: (String? newValue) {
            setState(() {
              _espotDeparturePortService = newValue!;
            });
          },
          items: _ESpotOptions.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
        SizedBox(height: 10),
        GestureDetector(
          onTap: () {
           Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => LocationSearchPage(),
              ),
            ).then((result) {
              if (result != null) {
                setState(() {
                  _espotDestinationPort = result;
                });
              }
            });
          },
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(4),
            ),
            child: Row(
              children: [
                Expanded(
                  child: Text(
                    _espotDestinationPort.isEmpty ? '点击搜索目的港口' : _espotDestinationPort,
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
                Icon(
                  Icons.search,
                  color: Colors.grey,
                ),
              ],
            ),
          ),
        ),
        SizedBox(height: 10),
        DropdownButtonFormField<String>(
          decoration: InputDecoration(
            labelText: '目的地陆运服务',
            contentPadding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            border: OutlineInputBorder(),
          ),
          value: _espotDestinationPortService,
          icon: Icon(Icons.arrow_drop_down),
          iconSize: 24,
          elevation: 16,
          style: TextStyle(color: Colors.deepPurple),
          onChanged: (String? newValue) {
            setState(() {
              _espotDestinationPortService = newValue!;
            });
          },
          items: _ESpotOptions.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
        Container(
          width: double.infinity,
          margin: EdgeInsets.only(top: 10),
          child: ElevatedButton(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Color(0xffE22E4F)),
              shape: MaterialStateProperty.all(RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8))),
            ),
            onPressed: () {},
            child: Text(
              '订舱',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ]),
    );
  }

  Widget _buildEQuoteSectionWidget() {
    return Container(
      width: double.infinity,
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Text(
          'E-Quote',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w500,
            color: Colors.black,
          ),
          textAlign: TextAlign.left,
        ),
        SizedBox(height: 20),
        GestureDetector(
          onTap: () {
           Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => LocationSearchPage(),
              ),
            ).then((result) {
              if (result != null) {
                setState(() {
                  _equoteDeparturePort = result;
                });
              }
            });
          },
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(4),
            ),
            child: Row(
              children: [
                Expanded(
                  child: Text(
                    _equoteDeparturePort.isEmpty ? '点击搜索起运港口' : _equoteDeparturePort,
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
                Icon(
                  Icons.search,
                  color: Colors.grey,
                ),
              ],
            ),
          ),
        ),
        SizedBox(height: 10),
        DropdownButtonFormField<String>(
          decoration: InputDecoration(
            labelText: '起运地陆运服务',
            contentPadding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            border: OutlineInputBorder(),
          ),
          value: _equoteDeparturePortService,
          icon: Icon(Icons.arrow_drop_down),
          iconSize: 24,
          elevation: 16,
          style: TextStyle(color: Colors.deepPurple),
          onChanged: (String? newValue) {
            setState(() {
              _equoteDeparturePortService = newValue!;
            });
          },
          items: _ESpotOptions.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
        SizedBox(height: 10),
        GestureDetector(
          onTap: () {
           Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => LocationSearchPage(),
              ),
            ).then((result) {
              if (result != null) {
                setState(() {
                  _equoteDestinationPort = result;
                });
              }
            });
          },
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(4),
            ),
            child: Row(
              children: [
                Expanded(
                  child: Text(
                    _equoteDestinationPort.isEmpty ? '点击搜索目的港口' : _equoteDestinationPort,
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
                Icon(
                  Icons.search,
                  color: Colors.grey,
                ),
              ],
            ),
          ),
        ),
        SizedBox(height: 10),
        DropdownButtonFormField<String>(
          decoration: InputDecoration(
            labelText: '目的地陆运服务',
            contentPadding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            border: OutlineInputBorder(),
          ),
          value: _equoteDestinationPortService,
          icon: Icon(Icons.arrow_drop_down),
          iconSize: 24,
          elevation: 16,
          style: TextStyle(color: Colors.deepPurple),
          onChanged: (String? newValue) {
            setState(() {
              _equoteDestinationPortService = newValue!;
            });
          },
          items: _ESpotOptions.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
        Container(
          width: double.infinity,
          margin: EdgeInsets.only(top: 10),
          child: ElevatedButton(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Color(0xffE22E4F)),
              shape: MaterialStateProperty.all(RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8))),
            ),
            onPressed: () {},
            child: Text(
              '订舱',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ]),
    );
  }

  Widget _buildETruckingSectionWidget() {
    return Container(
      width: double.infinity,
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Text(
          'E-Trucking',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w500,
            color: Colors.black,
          ),
          textAlign: TextAlign.left,
        ),
        SizedBox(height: 20),
        GestureDetector(
          onTap: () {
           Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => LocationSearchPage(),
              ),
            ).then((result) {
              if (result != null) {
                setState(() {
                  _etruckingDeparturePort = result;
                });
              }
            });
          },
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(4),
            ),
            child: Row(
              children: [
                Expanded(
                  child: Text(
                    _etruckingDeparturePort.isEmpty ? '点击搜索起运港口' : _etruckingDeparturePort,
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
                Icon(
                  Icons.search,
                  color: Colors.grey,
                ),
              ],
            ),
          ),
        ),
        SizedBox(height: 10),
        DropdownButtonFormField<String>(
          decoration: InputDecoration(
            labelText: '起运地陆运服务',
            contentPadding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            border: OutlineInputBorder(),
          ),
          value: _etruckingDeparturePortService,
          icon: Icon(Icons.arrow_drop_down),
          iconSize: 24,
          elevation: 16,
          style: TextStyle(color: Colors.deepPurple),
          onChanged: (String? newValue) {
            setState(() {
              _etruckingDeparturePortService = newValue!;
            });
          },
          items: _ESpotOptions.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
        SizedBox(height: 10),
        GestureDetector(
          onTap: () {
           Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => LocationSearchPage(),
              ),
            ).then((result) {
              if (result != null) {
                setState(() {
                  _etruckingDestinationPort = result;
                });
              }
            });
          },
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(4),
            ),
            child: Row(
              children: [
                Expanded(
                  child: Text(
                    _etruckingDestinationPort.isEmpty ? '点击搜索目的港口' : _etruckingDestinationPort,
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
                Icon(
                  Icons.search,
                  color: Colors.grey,
                ),
              ],
            ),
          ),
        ),
        SizedBox(height: 10),
        DropdownButtonFormField<String>(
          decoration: InputDecoration(
            labelText: '目的地陆运服务',
            contentPadding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            border: OutlineInputBorder(),
          ),
          value: _etruckingDestinationPortService,
          icon: Icon(Icons.arrow_drop_down),
          iconSize: 24,
          elevation: 16,
          style: TextStyle(color: Colors.deepPurple),
          onChanged: (String? newValue) {
            setState(() {
              _etruckingDestinationPortService = newValue!;
            });
          },
          items: _ESpotOptions.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
        Container(
          width: double.infinity,
          margin: EdgeInsets.only(top: 10),
          child: ElevatedButton(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Color(0xffE22E4F)),
              shape: MaterialStateProperty.all(RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8))),
            ),
            onPressed: () {},
            child: Text(
              '订舱',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ]),
    );
  }
}
